<template>
  <div class="app-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <el-button icon="Back" @click="goBack">返回</el-button>
        <span class="page-title">详情</span>
      </div>
      <div class="header-right">
        <span class="user-info">待审核</span>
      </div>
    </div>

    <!-- 详情内容 -->
    <div class="detail-content" v-loading="loading">
      <el-card class="detail-card">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="标题">{{ detailForm.title }}</el-descriptions-item>
          <el-descriptions-item label="发布者">{{ detailForm.publisher }}</el-descriptions-item>
          <el-descriptions-item label="发布时间">{{ parseTime(detailForm.time, '{y}-{m}-{d}') }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag type="warning">待审核</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="咨询电话">{{ detailForm.telephone }}</el-descriptions-item>
          <el-descriptions-item label="预览图" :span="2">
            <div v-if="detailForm.img" class="image-container">
              <el-image 
                :src="detailForm.img" 
                fit="cover"
                style="width: 200px; height: 150px;"
                :preview-src-list="[detailForm.img]"
              />
            </div>
            <span v-else>暂无图片</span>
          </el-descriptions-item>
          <el-descriptions-item label="发布内容" :span="2">
            <div class="content-display" v-html="detailForm.content"></div>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 审核操作 -->
      <el-card class="audit-operation-card">
        <template #header>
          <span>审核操作</span>
        </template>
        <el-form ref="auditFormRef" :model="auditForm" :rules="auditRules" label-width="100px">
          <el-form-item label="审核结果:" prop="auditResult">
            <el-radio-group v-model="auditForm.auditResult">
              <el-radio :label="2">审核通过</el-radio>
              <el-radio :label="3">审核不通过</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitAudit">确定</el-button>
            <el-button @click="resetAuditForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script setup name="PendingDetail">
import { getPurchase, updatePurchase } from "@/api/system/purchase"
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const { proxy } = getCurrentInstance()

const loading = ref(true)
const detailForm = ref({})
const auditForm = ref({
  auditResult: 2
})

const auditRules = {
  auditResult: [
    { required: true, message: '请选择审核结果', trigger: 'change' }
  ]
}

/** 获取详情数据 */
function getDetail() {
  const id = route.params.id
  if (id) {
    loading.value = true
    getPurchase(id).then(response => {
      detailForm.value = response.data
      loading.value = false
    }).catch(() => {
      loading.value = false
      proxy.$modal.msgError("获取详情失败")
    })
  }
}

/** 提交审核 */
function submitAudit() {
  proxy.$refs["auditFormRef"].validate(valid => {
    if (valid) {
      loading.value = true
      const updateData = {
        ...detailForm.value,
        status: auditForm.value.auditResult
      }
      
      updatePurchase(updateData).then(response => {
        proxy.$modal.msgSuccess("审核成功")
        // 审核成功后返回待审核列表页面
        router.push('/system/pending')
      }).catch(() => {
        loading.value = false
        proxy.$modal.msgError("审核失败")
      })
    }
  })
}

/** 重置审核表单 */
function resetAuditForm() {
  auditForm.value = {
    auditResult: 2
  }
  proxy.$refs["auditFormRef"].resetFields()
}

/** 返回上一页 */
function goBack() {
  router.go(-1)
}

// 页面加载时获取数据
onMounted(() => {
  getDetail()
})
</script>

<style scoped>
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: #fff;
  border-bottom: 1px solid #e4e7ed;
  margin-bottom: 20px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.page-title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-info {
  color: #606266;
  font-size: 14px;
}

.detail-content {
  padding: 0 20px;
}

.detail-card {
  margin-bottom: 20px;
}

.audit-operation-card {
  margin-bottom: 20px;
}

.image-container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.content-display {
  line-height: 1.6;
  color: #303133;
}

.content-display :deep(img) {
  max-width: 100%;
  height: auto;
}
</style> 